<!DOCTYPE html>
<!--[if lte IE 9]><html class="lt-ie10 lt-ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>赛尔（赛er）——发布活动</title>
  <meta name="keywords" content="赛尔（赛er）是一个面向全国各大高校大学生的一站式社区平台，集竞赛活动发布和讨论为一体，提供发布、查询、组队、经验分享等多元化服务。" />
  <meta name="description"
    content="平台聚合了国内各大高校的校内比赛以及国内外各领域最优质的赛事活动信息。赛事内容囊括创新创业、演讲辩论、财会金融、艺术设计、学科竞赛、公益志愿等众多领域。赛尔（赛er）致力于打造一个融合大学生学习、赛事、活动、保研、考研等为一体的成长交流空间。" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <meta name="renderer" content="webkit">


  <link rel="stylesheet" type="text/css" href="/static/css/top-4.9.6.2.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/activity-4.3.0.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/tag.handle.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui-1.10.4.custom.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/default.min.css">

  <script src="/static/js/jquery-1.10.2.min.js"></script>


  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="/common/common.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui@2.0.11/lib/index.js"></script>

  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  <script type="text/javascript" src="/static/layui/layui.js"></script>

  <style>
    .layui-container{
      border: 1px solid #ededed;
      border-radius: 4px;
      background: #fbfbfb;
      padding: 38px 39px;
      height: 100px;
      font-size: 20px;
      margin-bottom: 30px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar-uploader img {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
</head>

<body>
  <div style="display:none;position:absolute;left:0;top:0;">
    <img src="/static/picture/wechat_share_icon.png" id="weChatShareIcon">
  </div>
  <!--body-wrap-->
  <div id="app" class="body-wrap">

    <div class="body-main main-wrap v-4-2">

      <ul class="layui-nav layui-bg-cyan" style="margin: 0 auto;padding:0 12%" lay-filter="">
        <li style="display: inline-block;line-height: 60px;vertical-align: middle;position: relative;"><a
            href="/index.html"><img style="height: 60px;margin-right:15px;" src="/static/images/logo.png"></a></li>
        <!-- 选中 加上 layui-this -->
        <li class="layui-nav-item"><a href="/index.html">首页</a></li>
        <li class="layui-nav-item"><a href="/competition/competition.html">竞赛</a></li>
        <li class="layui-nav-item"><a href="/activity/activity.html">活动</a></li>
        <li class="layui-nav-item"><a href="/ask/ask.html">论坛</a></li>
        <li class="layui-nav-item"><a href="/article/article.html">文章</a></li>
        <li class="layui-nav-item  layui-this" v-if="user!=''&&user!=null&&user!=undefined">
          <a href="javascript:;">发布</a>
          <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="/competition/publish_competition.html">创建竞赛</a></dd>
            <dd><a href="/activity/publish_activity.html">发布活动</a></dd>
            <dd><a href="/ask/publish_ask.html">发起提问</a></dd>
            <dd><a href="/article/publish_article.html">发表文章</a></dd>
          </dl>
        </li>
        <template v-if="user!=''&&user!=null&&user!=undefined">
          <li class="layui-nav-item" style="float: right">
            <a href="javascript:;" style="padding: 0 20px 0 0px">
              <img :src="NGINX_SERVER+user.AVATAR" class="layui-nav-img">
              {{user.NAME}}
            </a>
            <dl class="layui-nav-child">
              <dd><a href="/user/my_home.html">我的主页</a></dd>
              <dd><a href="javascript:void(0);" style="color:red" onclick="logout()">退出登录</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item" style="float: right;margin-right: 25px;">
            <a href="/user/my_msg.html" style="cursor: pointer;"><i
                class="layui-icon layui-icon-notice" style="font-size: 18px;"></i><span class="layui-badge"
                v-if="unreadCount>0">{{unreadCount}}</span></a>
          </li>
        </template>
        <template v-else>
          <li style="float:right" class="layui-nav-item"><a href="/login.html">登录</a></li>
          <li style="float:right" class="layui-nav-item"><a href="/reg.html">注册</a></li>
        </template>
      </ul>
      <style type="text/css">
        .creat-cy-box .common-tag-handle-box label.error {
          z-index: 10
        }

        .creat-cy-box .common-tag-handle-box .item-option {
          width: 233px
        }

        .car-compet-img-wrap-box {
          cursor: default
        }

        input.cke_dialog_ui_checkbox_input {
          -webkit-appearance: checkbox;
          background: initial
        }

        .car-compet-loading-box {
          position: absolute;
          width: 100%;
          height: 100%;
          background: url("/static/images/loading.gif") center center no-repeat;
          top: 0;
          left: 0;
          z-index: 10;
          display: none
        }

        .car-compet-loading-box.show {
          display: block
        }
      </style>
      <!-- content -->
      <div style="padding-top:20px;"></div>
      <!-- 基本信息 -->
      <!-- <div class="cy-info-box">
        <span class="public cy-info-line"></span>
        <span class="public info-title">基本信息</span>
        <span class="public cy-info-line"></span>
      </div> -->
      <el-row v-if="user.ROLE_NAME=='发布员'" style="width: 80%;margin:0 auto">
        <el-col :sm="24" :md="24">
          <div class="app-container" style="margin:0 auto;">

            <blockquote v-if="isEdit" class="layui-elem-quote">温馨提示：编辑重新发布活动需要重新审核。</blockquote>
            <!-- 输入表单 -->
            <el-form label-width="120px">
              <el-form-item label="活动标题">
                <el-input placeholder="输入活动标题" v-model="activity.ACT_TITLE" />
              </el-form-item>
              <el-form-item label="主办方">
                <el-input v-model="activity.ACT_SPONSOR" placeholder="输入主办方" />
              </el-form-item>
              <el-form-item label="联系方式">
                <el-row>
                  <el-col class="line" :sm="2" :md="1">
                    <el-tag type="info">电话</el-tag>
                  </el-col>
                  <el-col :sm="6" :md="7">
                    <el-input v-model="activity.TEL" placeholder="输入电话" />
                  </el-col>
                  <el-col class="line" :sm="2" :md="1">
                    <el-tag type="info">邮箱</el-tag>
                  </el-col>
                  <el-col :sm="6" :md="7">
                    <el-input v-model="activity.EMAIL" placeholder="输入邮箱" />
                  </el-col>
                  <el-col class="line" :sm="2" :md="1">
                    <el-tag type="info">QQ</el-tag>
                  </el-col>
                  <el-col :sm="6" :md="7">
                    <el-input v-model="activity.QQ" placeholder="输入QQ" />
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="报名时间">
                <el-col class="line" :sm="2" :md="1">
                  <el-tag type="info">开始</el-tag>
                </el-col>
                <el-col :sm="9" :md="6">
                  <el-date-picker placeholder="选择开始时间" v-model="activity.ACT_SIGN_START_TIME" value-format="yyyy-MM-dd" />
                </el-col>
                <el-col class="line" :sm="2" :md="1">
                  <el-tag type="info">结束</el-tag>
                </el-col>
                <el-col :sm="9" :md="6">
                  <el-date-picker placeholder="选择结束时间" v-model="activity.ACT_SIGN_END_TIME" value-format="yyyy-MM-dd" />
                </el-col>
              </el-form-item>
              <el-form-item label="活动时间">
                <el-col class="line" :sm="2" :md="1">
                  <el-tag type="info">开始</el-tag>
                </el-col>
                <el-col :sm="9" :md="6">
                  <el-date-picker placeholder="选择开始时间" v-model="activity.ACT_START_TIME" value-format="yyyy-MM-dd" />
                </el-col>
                <el-col class="line" :sm="2" :md="1">
                  <el-tag type="info">结束</el-tag>
                </el-col>
                <el-col :sm="9" :md="6">
                  <el-date-picker placeholder="选择结束时间" v-model="activity.ACT_END_TIME" value-format="yyyy-MM-dd" />
                </el-col>
              </el-form-item>
              <el-form-item label="活动地点">
                <el-radio-group v-model="activity.ACT_LOCATION_TYPE">
                  <el-radio label="online">线上</el-radio>
                  <el-radio label="offline">线下</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row v-if="activity.ACT_LOCATION_TYPE === 'offline'">
                <el-form-item>
                  <el-col :sm="5" :md="5">
                    <el-select v-model="activity.ACT_LOCATION1" placeholder="请选择省份" @change="provinceChanged">
                      <el-option v-for="item in provinceList" :key="item.id" :label="item.provinceName"
                        :value="item.provinceName">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :sm="5" :md="5">
                    <el-select v-model="activity.ACT_LOCATION" placeholder="请选择市">
                      <el-option v-for="item in cityList" :key="item.citysName" :label="item.citysName"
                        :value="item.citysName">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :sm="11" :md="11">
                    <el-input placeholder="输入详细地址" v-model="activity.ACT_LOCATION_DETAIL" />
                  </el-col>
                </el-form-item>

              </el-row>
              <el-row v-else>

                <el-col :sm="7" :md="7">
                  <el-form-item>
                    <el-input placeholder="输入线上方式" v-model="activity.ACT_ONLINE_NAME" />
                  </el-form-item>
                </el-col>
                <el-col :sm="11" :md="11">
                  <el-form-item>
                    <el-input placeholder="输入详情" v-model="activity.ACT_ONLINE_VALUE" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="活动报名费">
                <el-input placeholder="输入活动报名费" v-model="activity.ACT_FEE" />
              </el-form-item>
              <el-form-item label="活动分类">
                <el-select v-model="activity.ACT_CATEGORY" placeholder="请选择活动分类">
                  <el-option v-for="item in categoryList" :key="item.bianma" :label="item.name" :value="item.bianma">
                  </el-option>
                </el-select>
              </el-form-item>





              <el-form-item label="活动封面">
                <span style="color: red">推荐宽高比例3:1</span>
                <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError"
                  :before-upload="beforeAvatarUpload" class="avatar-uploader"
                  action="http://182.92.69.172:8081/api/base/uploadImg">
                  <img v-if="imgLink" :src="imgLink">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>



              <el-form-item label="活动内容">
                <div id="div1">
                  <p></p>
                </div>
              </el-form-item>


              <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">保存</el-button>
              </el-form-item>

            </el-form>
          </div>
        </el-col>
      </el-row>
      <div class="layui-container" v-else>
        抱歉！您暂无权限，如需发布活动，请联系客服！
      </div>
    </div>

    <div class="footer-wrap v-4-2">
      <div class="footer other">
        <div class="common-box footer-box">
          <div class="to-top-box" id="toUpBox">
            <!--<a href="javascript:;" target="_blank" class="common-icon-big to-feedback-btn" title="意见反馈"></a>-->
            </a>
            <div class="iradio-2 to-msite-btn to-msite-btn-2" title="微信公众号">
            <span class="weixin-box" style="margin-top: -42px;">
              <img src="/static/images/erweima.jpg" alt="微信公众号">
              <span class="weixin-txt">关注赛er订阅号</span>
              <img src="/static/images/kefu.jpg" alt="微信客服">
              <span class="weixin-txt">添加赛er客服</span>
              <span class="arrow arrow-right boxL-cor" style="margin-top: -70px;"></span>
            </span>
            </div>
            <a href="javascript:;" class="to-top-btn common-icon-big" id="toUp" title="返回顶部"></a>
          </div>
          <div class="fl ft-info-box">
            <div class="ft-tit" title="关于赛er">关于赛er</div>
            <ul class="ft-list">
              <li class="item">
                <a href="" title="了解赛er" target="_blank" rel="nofollow">了解赛er</a>
              </li>
              <li class="item">
                <a href="./contact.html" title="服务协议" target="_blank" rel="nofollow">服务协议</a>
              </li>
              <li class="item">
                <a href="" title="合作伙伴" target="_blank" rel="nofollow">合作伙伴</a>
              </li>
              <li class="item">
                <a href="" title="加入我们" target="_blank" rel="nofollow">加入我们</a>
              </li>
              <li class="item">
                <a href="" title="隐私协议" target="_blank" rel="nofollow">隐私协议</a>
              </li>
            </ul>
          </div>
          <div class="fl ft-info-box">
            <div class="ft-tit" title="帮助中心">帮助中心</div>
            <ul class="ft-list">
              <li class="item">
                <a href="" title="常见问题" target="_blank" rel="nofollow">常见问题</a>
              </li>
              <li class="item">
                <a href="./legal.html" title="社区规范" target="_blank" rel="nofollow">社区规范</a>
              </li>
              <li class="item">
                <a href="" title="意见反馈" target="_blank" rel="nofollow">意见反馈</a>
              </li>
            </ul>
          </div>
          <div class="fr ft-info-box" style="width: 200px;">
            <div class="ft-tit" title="在线客服">联系我们</div>
            <ul class="ft-list">
              <li class="item">
                赛er<span class="item-dot"></span>客服QQ：<a href="https://wpa.qq.com/msgrd?v=3&uin=412414867&site=qq&menu=yes">412414867</a>
              </li>
              <li class="item">
                赛er<span class="item-dot"></span>官方QQ群：320513949
              </li>
            </ul>
          </div>

        </div>
      </div>
      <!-- 备案 footer -->
      <div class="ft-btm">
        <div class="common-box ft-btm-box">
          <div class="btn-con">
            <span class="ft-paragraph">©<span id="nowYear"></span>赛er<span class="s-4"></span></span>
            <span><a href="https://beian.miit.gov.cn/" target="_blank" style="color: #555;">苏ICP备2021019825号</a></span>
          </div>
        </div>
      </div>
    </div>
  </div>


<script>
  toTopFun();
</script>
</body>
<script src="/static/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/static/js/jquery-ui-timepicker-addon.js"></script>

<!--vue-->
<script src="./data.js"></script>
<!-- 引入 wangEditor.min.js -->
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

<script>

  let provinceList = [];
  for (let i = 0; i < datas.provinces.length; i++) {
    provinceList.push({ id: i, provinceName: datas.provinces[i].provinceName, citys: datas.provinces[i].citys });
  }

</script>
<script>
  let editor;
  const app = new Vue({
    el: "#app",
    data: {
      user: '',
      // 活动对象
      activity: {
        img: "",
        ACT_TITLE: "",
        ACT_SPONSOR: "",
        TEL: "",
        EMAIL: "",
        QQ: "",
        ACT_SIGN_START_TIME: "",
        ACT_SIGN_END_TIME: "",
        ACT_START_TIME: "",
        ACT_END_TIME: "",
        ACT_LOCATION1: "",
        ACT_LOCATION: "",
        ACT_LOCATION_DETAIL: "",
        ACT_ONLINE_NAME: "",
        ACT_ONLINE_VALUE: "",
        ACT_LOCATION_TYPE: "online",
        ACT_FEE: "",
        ACT_CATEGORY: "",
        ACT_CONTENT: "",
      },
      isEdit:false,
      saveBtnDisabled: false, // 默认按钮可用
      provinceList: provinceList,
      province: "北京市",
      cityList: [{ citysName: "北京市" }],
      city: "",
      categoryList: [{ id: 1, categoryName: "志愿活动", bianma: "activity_1" }],
      imgLink: "",
      unreadCount: 0,
      NGINX_SERVER: NGINX_SERVER
    },
    created() {

      this.user = JSON.parse(sessionStorage.getItem("userInfo"))

      this.getCategoryList();

    },
    mounted() {
      getUnreadCount(data => {
        app.unreadCount = data;
      });
      const E = window.wangEditor
      editor = new E('#div1')
      editor.config.zIndex = 0
      editor.config.height = 500
      editor.config.uploadImgServer = BaseUrl+'api/base/uploadImg'
      editor.config.uploadImgMaxLength = 1 // 一次最多上传 5 个图片
      editor.config.uploadFileName = 'file'
      editor.config.withCredentials = true
      editor.config.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
          console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
          console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
          // result 即服务端返回的接口
          console.log('customInsert', result)

          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(NGINX_SERVER+result.data)
        }
      }
      editor.create()
      let id = { "ACTIVITY_ID": getUrlParam("id")};
      //alert(id);
      let _this = this;
      if (id["ACTIVITY_ID"]) {
        _this.isEdit = true;
        $('title').text('赛尔（赛er）——编辑活动')
        getDataByPost("api/activity/detail", id, function (res) {
          _this.activity = res.data;
          // if (_this.activity.img == null) {
          //   alert("xx")
          // }
          _this.imgLink = _this.NGINX_SERVER + res.data.IMG_URL
          editor.txt.html(_this.activity.ACT_CONTENT);
        })
      }
    },

    methods: {
      //获取分类列表
      getCategoryList() {
        let _this = this;
        getDataByGet("api/base/getActivityAllCategory", null, function (res) {
          _this.categoryList = res.data;
        })
      },
      // 点击选择某省后触发事件
      provinceChanged(value) {

        // 遍历省列表
        this.provinceList.forEach(p => {
          // 判断当前选中的省名是否和当前遍历的省名一致
          if (p.provinceName === value) {
            // 清空当前值
            // this.courseInfo.subjectId = ''
            // 如果一致，给当前城市列表赋值
            this.cityList = p.citys;

          }
        })
      },
      saveOrUpdate() {
        if (this.activity.ACT_TITLE === "") {
          toastr.warning("请输入标题")
          return
        }
        if (this.activity.img === "") {
          toastr.warning("请上传封面")
          return
        }

        if (this.activity.ACT_SPONSOR === "") {
          toastr.warning("请输入主办方")
          return
        }
        if (this.activity.ACT_SIGN_START_TIME === "") {
          toastr.warning("请选择报名开始时间")
          return
        }
        if (this.activity.ACT_SIGN_END_TIME === "") {
          toastr.warning("请选择报名结束时间")
          return
        }
        if (this.activity.ACT_START_TIME === "") {
          toastr.warning("请选择活动开始时间")
          return
        }
        if (this.activity.ACT_END_TIME === "") {
          toastr.warning("请选择活动结束时间")
          return
        }
        if (this.activity.img === "") {
          toastr.warning("请上传封面")
          return
        }
        if (this.activity.img === "") {
          toastr.warning("请上传封面")
          return
        }
        if (this.activity.ACT_CATEGORY === "") {
          toastr.warning("请选择活动分类")
          return
        }
        if (this.activity.ACT_FEE === "") {
          toastr.warning("请输入活动报名费")
          return
        }
        if (editor.txt.html() === "") {
          toastr.warning("请输入活动内容")
          return
        }

        this.saveBtnDisabled = true
        if (!this.activity.ACTIVITY_ID) {
          this.saveData()
        } else {
          this.updateData()
        }
      },

      // 数据保存
      saveData() {
        let _this = this;

        this.activity.ACT_CONTENT = editor.txt.html();
        let data = this.paramsToFormData(this.activity);

        postDataByFormData("api/activity/addActivity", data, function (res) {
          toastr.success("发布成功，请耐心等待审核！")

        })
      },
      paramsToFormData(obj) {
        const formData = new FormData();
        Object.keys(obj).forEach((key) => {
          if (obj[key] instanceof Array) {
            obj[key].forEach((item) => {
              formData.append(key, item);
            });
            return;
          }
          formData.append(key, obj[key]);
        });
        return formData;
      },


      // 数据更新
      updateData() {
        let _this = this;

        this.activity.ACT_CONTENT = editor.txt.html();
        let data = this.paramsToFormData(this.activity);

        postDataByFormData("api/activity/editActivity", data, function (res) {
          toastr.success("更新成功")

        })
      },

      // 根据id查询数据
      fetchDataById(id) {
        activityApi.getById(id).then(response => {
          this.activity = response.data.item
        })
      },

      // 上传成功回调
      handleAvatarSuccess(res, file) {

        if (res.code == 200) {
          //
          this.imgLink = 'http://182.92.69.172/' + res.data
          this.activity.img = file.raw
          // 强制重新渲染
          this.$forceUpdate()
        } else {
          toastr.error('上传失败 （非200）')
        }
      },

      // 错误处理
      handleAvatarError() {

        toastr.error('上传失败（http失败）')
      },

      // 上传校验
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          toastr.error('上传封面图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          toastr.error('上传封面图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
    }
  })

  //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
  layui.use('element', function () {
    var element = layui.element;

    //…
  });
</script>

</html>